<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2022-06-29 09:25:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-06 14:38:55
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @row-click="singleElection" highlight-current-row>
      <el-table-column width="55" label="选择">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="编号" style="width: 60px"> </el-table-column>
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <br />
    <el-table
      :data="tableDatas"
      stripe
      style="width: 100%"
      @current-change="handleRadioChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="50px" align="center">
        <template slot-scope="scope">
          <el-radio v-model="defaultRadio" :label="scope.row.index">
            {{ scope.row.index }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDatas: [
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      defaultRadio: -1,

      loading: false,

      tableData: [
        {
          id: '0003',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          id: '0004',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      //   当前选择的行的id
      templateSelection: '',
      //   当前选择的行的数据
      checkList: [],
      checkedGh: [],
    };
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id;
      this.checkList = this.tableData.filter((item) => item.id === row.id);
      console.log(`该行的编号为${row.id}`);
      console.log(this.templateSelection);
    },

    // 2
    // 单选框选中数据
    handleRadioChange(val) {
      if (val) {
        this.defaultRadio = val.index;
      }
      console.log(val);
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex; //在原有的数据上加一个index
      console.log(row, rowIndex);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  width: 100%;

  height: 300px;
  border: 1px solid red;
}
</style>
